﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <meta name="keywords" content="jQuery, Rating, Rating Widget, jqxRating" />
    <meta name="description" content="This page represents the help documentation of the jqxRating widget." />
    <title>jqxRating API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
           $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
    <div id="properties">
                                                                <h2 class="documentation-top-header">
                                                                    Properties</h2>
                                                                <table class="documentation-table">
                                                                    <tr>
                                                                        <th>
                                                                            Name
                                                                        </th>
                                                                        <th>
                                                                            Type
                                                                        </th>
                                                                        <th>
                                                                            Default
                                                                        </th>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="documentation-option-type-click">
                                                                            <span id='property-name-disabled'>count</span>
                                                                        </td>
                                                                        <td>
                                                                            <span>Number</span>
                                                                        </td>
                                                                        <td>
                                                                            5
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan='3' style='width: 100%'>
                                                                            <div class="documentation-option-description property-content" style="display: none;">
                                                                                <p>
                                                                                    Sets or gets images count.</p>
                                                                                <h4>
                                                                                    Code examples</h4>
                                                                                <p>
                                                                                  Set the <code>count</code> property.
                                                                                </p>
                                                                                <pre><code>$('#jqxRating').jqxRating({count:3});</code></pre>
                                                                                 <p>
                                                                                        Get the <code>count</code> property.
                                                                                          </p>
                                                                               <pre><code>var count = $('#jqxRating').jqxRating('count');</code></pre>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="documentation-option-type-click">
                                                                            <span id='Span1'>disabled</span>
                                                                        </td>
                                                                        <td>
                                                                            <span>Boolean</span>
                                                                        </td>
                                                                        <td>
                                                                            false
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan='3' style='width: 100%'>
                                                                            <div class="documentation-option-description property-content" style="display: none;">
                                                                                <p>
                                                                                    Sets or gets whether the rating widget is disabled.</p>
                                                                                <h4>
                                                                                    Code examples</h4>
                                                                                <p>
                                                                                    Set the <code>disabled</code> property.
                                                                                </p>
                                                                                <pre><code>$('#jqxRating').jqxRating({disabled:true});</code></pre>
                                                                                 <p>
                                                                                        Get the <code>disabled</code> property.
                                                                                          </p>
                                                                               <pre><code>var disabled = $('#jqxRating').jqxRating('disabled');</code></pre>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="documentation-option-type-click">
                                                                            <span id='Span2'>value</span>
                                                                        </td>
                                                                        <td>
                                                                            <span>Number</span>
                                                                        </td>
                                                                        <td>
                                                                            0
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan='3' style='width: 100%'>
                                                                            <div class="documentation-option-description property-content" style="display: none;">
                                                                                <p>
                                                                                   Sets or gets current rating.</p>
                                                                                <h4>
                                                                                    Code examples</h4>
                                                                                <p>
                                                                                    Set the <code>value</code> property.
                                                                                </p>
                                                                                <pre><code>$('#jqxRating').jqxRating({value:5});</code></pre>
                                                                                 <p>
                                                                                        Get the <code>value</code> property.
                                                                                          </p>
                                                                               <pre><code>var value = $('#jqxRating').jqxRating('value');</code></pre>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="documentation-option-type-click">
                                                                            <span id='Span3'>height</span>
                                                                        </td>
                                                                        <td>
                                                                            <span>Number/String</span>
                                                                        </td>
                                                                        <td>
                                                                            auto
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan='3' style='width: 100%'>
                                                                            <div class="documentation-option-description property-content" style="display: none;">
                                                                                <p>
                                                                                   Sets or gets widget's height.</p>
                                                                                <h4>
                                                                                    Code examples</h4>
                                                                                <p>
                                                                                  Set the <code>height</code> property.
                                                                                </p>
                                                                                <pre><code>$('#jqxRating').jqxRating({height:35});</code></pre>
                                                                                 <p>
                                                                                        Get the <code>height</code> property.
                                                                                          </p>
                                                                               <pre><code>var height = $('#jqxRating').jqxRating('height');</code></pre>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="documentation-option-type-click">
                                                                            <span id='Span4'>width</span>
                                                                        </td>
                                                                        <td>
                                                                            <span>Number/String</span>
                                                                        </td>
                                                                        <td>
                                                                            auto
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan='3' style='width: 100%'>
                                                                            <div class="documentation-option-description property-content" style="display: none;">
                                                                                <p>
                                                                                   Sets or gets widget's width.</p>
                                                                                <h4>
                                                                                    Code examples</h4>
                                                                                <p>
                                                                                    Set the <code>width</code> property.
                                                                                </p>
                                                                                <pre><code>$('#jqxRating').jqxRating({width:150});</code></pre>
                                                                                 <p>
                                                                                        Get the <code>width</code> property.
                                                                                          </p>
                                                                               <pre><code>var width = $('#jqxRating').jqxRating('width');</code></pre>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="documentation-option-type-click">
                                                                            <span id='Span5'>precision</span>
                                                                        </td>
                                                                        <td>
                                                                            <span>Number</span>
                                                                        </td>
                                                                        <td>
                                                                            1
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan='3' style='width: 100%'>
                                                                            <div class="documentation-option-description property-content" style="display: none;">
                                                                                <p>
                                                                                    Sets or gets vote precision.</p>
                                                                                <h4>
                                                                                    Code examples</h4>
                                                                                <p>
                                                                                   Set the <code>precision</code> property.
                                                                                </p>
                                                                                <pre><code>$('#jqxRating').jqxRating({precision:1});</code></pre>
                                                                                 <p>
                                                                                        Get the <code>precision</code> property.
                                                                                          </p>
                                                                               <pre><code>var precision = $('#jqxRating').jqxRating('precision');</code></pre>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="documentation-option-type-click">
                                                                            <span id='Span6'>singleVote</span>
                                                                        </td>
                                                                        <td>
                                                                            <span>Boolean</span>
                                                                        </td>
                                                                        <td>
                                                                            false
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan='3' style='width: 100%'>
                                                                            <div class="documentation-option-description property-content" style="display: none;">
                                                                                <p>
                                                                                    Sets or gets whether the user can vote single or multiple times.</p>
                                                                                <h4>
                                                                                    Code examples</h4>
                                                                                <p>
                                                                                    Set the <code>singleVote</code> property.
                                                                                </p>
                                                                                <pre><code>$('#jqxRating').jqxRating({singleVote:true});</code></pre>
                                                                                 <p>
                                                                                        Get the <code>singleVote</code> property.
                                                                                          </p>
                                                                               <pre><code>var singleVote = $('#jqxRating').jqxRating('singleVote');</code></pre>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="documentation-option-type-click">
                                                                            <span id='Span8'>itemHeight</span>
                                                                        </td>
                                                                        <td>
                                                                            <span>Number</span>
                                                                        </td>
                                                                        <td>
                                                                            auto
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan='3' style='width: 100%'>
                                                                            <div class="documentation-option-description property-content" style="display: none;">
                                                                                <p>
                                                                                    Sets or gets rating item's height.</p>
                                                                                <h4>
                                                                                    Code examples</h4>
                                                                                <p>
                                                                                   Set the <code>itemHeight</code> property.
                                                                                </p>
                                                                                <pre><code>$('#jqxRating').jqxRating({itemHeight:50});</code></pre>
                                                                                 <p>
                                                                                        Get the <code>itemHeight</code> property.
                                                                                          </p>
                                                                               <pre><code>var itemHeight = $('#jqxRating').jqxRating('itemHeight');</code></pre>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="documentation-option-type-click">
                                                                            <span id='Span9'>itemWidth</span>
                                                                        </td>
                                                                        <td>
                                                                            <span>Number</span>
                                                                        </td>
                                                                        <td>
                                                                            auto
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan='3' style='width: 100%'>
                                                                            <div class="documentation-option-description property-content" style="display: none;">
                                                                                <p>
                                                                                   Sets or gets rating item's width.</p>
                                                                                <h4>
                                                                                    Code examples</h4>
                                                                                <p>
                                                                                    Set the <code>itemWidth</code> property.
                                                                                </p>
                                                                                <pre><code>$('#jqxRating').jqxRating({itemWidth:50});</code></pre>
                                                                                 <p>
                                                                                        Get the <code>itemWidth</code> property.
                                                                                          </p>
                                                                               <pre><code>var itemWidth = $('#jqxRating').jqxRating('itemWidth');</code></pre>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan='3' style='width: 100%'>
                                                                            <h2 class="documentation-top-header">
                                                                                Events</h2>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="documentation-option-type-click">
                                                                            <span id='Span27'>change</span>
                                                                        </td>
                                                                        <td>
                                                                            <span>Event</span>
                                                                        </td>
                                                                        <td>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan='3' style='width: 100%'>
                                                                            <div class="documentation-option-description property-content" style="display: none;">
                                                                                <p>
                                                                                    The change event is triggered when the rating is changed.
                                                                                </p>
                                                                                <h4>
                                                                                    Code examples</h4>
                                                                                <p>
                                                                                    Bind to the shown <code>event</code> by type: jqxRating.
                                                                                </p>
                                                                                <pre><code>$('#jqxRating').bind('change', function (event)
{ 
    var value = event.value; 
}); </code></pre>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan='3' style='width: 100%'>
                                                                            <h2 class="documentation-top-header">
                                                                                Methods</h2>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="documentation-option-type-click">
                                                                            <span id='Span37'>setValue</span>
                                                                        </td>
                                                                        <td>
                                                                            <span>Method</span>
                                                                        </td>
                                                                        <td>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan='3' style='width: 100%'>
                                                                            <div class="documentation-option-description property-content" style="display: none;">
                                                                                <p>
                                                                                    Setting value to the rating widget.
                                                                                </p>
                                                                                <h4>
                                                                                    Code examples</h4>
                                                                                <p>
                                                                                    Invoke the <code>setValue</code> method.
                                                                                </p>
                                                                                <pre><code>$('#jqxRating').jqxRating('setValue'); </code></pre>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="documentation-option-type-click">
                                                                            <span id='Span7'>getValue</span>
                                                                        </td>
                                                                        <td>
                                                                            <span>Method</span>
                                                                        </td>
                                                                        <td>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan='3' style='width: 100%'>
                                                                            <div class="documentation-option-description property-content" style="display: none;">
                                                                                <p>
                                                                                    Getting current rating value.
                                                                                </p>
                                                                                <h4>
                                                                                    Code examples</h4>
                                                                                <p>
                                                                                    Invoke the <code>getValue</code> method.
                                                                                </p>
                                                                                <pre><code>$('#jqxRating').jqxRating('getValue'); </code></pre>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="documentation-option-type-click">
                                                                            <span id='Span10'>disable</span>
                                                                        </td>
                                                                        <td>
                                                                            <span>Method</span>
                                                                        </td>
                                                                        <td>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan='3' style='width: 100%'>
                                                                            <div class="documentation-option-description property-content" style="display: none;">
                                                                                <p>
                                                                                    Disabling the widget.
                                                                                </p>
                                                                                <h4>
                                                                                    Code examples</h4>
                                                                                <p>
                                                                                    Invoke the <code>disable</code> method.
                                                                                </p>
                                                                                <pre><code>$('#jqxRating').jqxRating('disable'); </code></pre>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="documentation-option-type-click">
                                                                            <span id='Span11'>enable</span>
                                                                        </td>
                                                                        <td>
                                                                            <span>Method</span>
                                                                        </td>
                                                                        <td>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan='3' style='width: 100%'>
                                                                            <div class="documentation-option-description property-content" style="display: none;">
                                                                                <p>
                                                                                    Enabling the widget.
                                                                                </p>
                                                                                <h4>
                                                                                    Code examples</h4>
                                                                                <p>
                                                                                    Invoke the <code>enable</code> method.
                                                                                </p>
                                                                                <pre><code>$('#jqxRating').jqxRating('enable'); </code></pre>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="documentation-option-type-click">
                                                                            <span id='Span59'>val</span>
                                                                        </td>
                                                                        <td>
                                                                            <span>Method</span>
                                                                        </td>
                                                                        <td>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan='3' style='width: 100%'>
                                                                            <div class="documentation-option-description property-content" style="display: none;">
                                                                                <p>
                                                                                    Sets or gets the value.
                                                                                </p>
                                                                                <h4>
                                                                                    Code example</h4>
                                                                                <p>
                                                                                    Invoke the <code>val</code> method.
                                                                                </p>
                                                                                // Get the value.
                                                                                <pre><code>var value = $("#jqxRating").jqxRating('val');</code></pre>                       
                                                                                // Get the value using jQuery's val()
                                                                                <pre><code>var value = $("#jqxRating").val();</code></pre>                       
                                                                                // Set value.
                                                                                    <pre><code>$("#jqxRating").jqxRating('val', 4);</code></pre>                       
                                                                                // Set value using jQuery's val().
                                                                                    <pre><code>$("#jqxRating").val(4);</code></pre>                                              
                                                                            </div>
                                                                        </td>
                                                                    </tr>
        </table>
        <br />
    </div>
</body>
</html>
